<template>
    <div class="ol-box">
        <div ref="viewerDivRef" class="map-container"></div>
        <div ref="divScaleLine" class="sfx-scale-line">For Scale Line</div>
        <div ref="demoDivRef" class="demo">Demo Div</div>
    </div>
</template>

<script setup lang="ts" name="MapOpenlayers">
import { ScaleLine } from "ol/control";
import olmap from "@/maps/sfxOpenLayers";

const viewerDivRef = ref<HTMLDivElement>();
const demoDivRef = ref<HTMLDivElement>();
const divScaleLine = ref<HTMLDivElement>();

// console.log(olmap.Name)

// 地图比例尺
const scaleLine = new ScaleLine({
    className: "sfx-scale-line",
    minWidth: 128,
    target: divScaleLine.value as HTMLDivElement,
});

olmap.init();
olmap.Map.getControls();
olmap.Map.addControl(scaleLine);

onMounted(() => {
    olmap.Map.setTarget(viewerDivRef.value as HTMLElement);
});
</script>

<style scoped lang="scss">
.ol-box {
    position: relative;
    width: 100%;
    height: 100%;

    .map-container {
        width: 100%;
        height: 100%;
    }

    .sfx-scale-line {
        position: absolute;
        bottom: 5px;
        left: 5px;
        width: 100px;
        color: red;
        background-color: antiquewhite;
    }

    .demo {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 100px;
        color: red;
        background-color: antiquewhite;
    }
}
</style>
